<template>
    <div class="flex side_menu_box" v-if="sideMenus.length">
        <div class="side-wrapper flex-column">
            <!-- <logo :collapse="collapsed" /> -->
            <scroll-bar class="side-main">
                <a-menu :mode="mode" :inline-collapsed="!collapsed" :selectedKeys="[$route.path]" :open-keys="openKeys"
                    @openChange="changeOpen">
                    <template v-for="item in sideMenus">
                        <menu-item v-if="!item.children && !item.hidden" :key="item.path" :currentRoute="item" />
                        <template v-if="layout == 'horizontal'">
                            <template v-if="item.children && !item.children.every(child => child.extendone == 'true')">
                                <menu-item v-if="item.children && !item.hidden" :key="item.path"
                                    :currentRoute="item"></menu-item>
                            </template>
                            <sub-menu v-if="item.children && item.children.every(child => child.extendone == 'true')"
                                :key="item.path" :currentRoute="item"></sub-menu>
                        </template>
                        <template v-else>
                            <sub-menu v-if="item.children && !item.children.every(child => child.extendone == 'true')"
                                :key="item.path" :currentRoute="item"></sub-menu>
                        </template>
                    </template>
                </a-menu>
            </scroll-bar>
            <div class="side_setting_box flex-row">
                <router-link class="setting_item" to="/setting/config/index">
                    <a-icon type="setting" />
                </router-link>
                <router-link class="setting_item" to="/setting/user/index">
                    <a-icon type="user" />
                </router-link>
                <!-- <div class="setting_item">
                    <a-icon type="skin" />
                </div> -->
            </div>
        </div>
        <div class="aside_fold" @click="toggleMenu">
            <a-icon :type="collapsed ? 'left' : 'right'" class="fold" />
        </div>
    </div>
</template>

<script>
import logo from './logo';
import subMenu from './subMenu';
import menuItem from './menuItem';
import { mapGetters } from 'vuex';
export default {
    name: 'sideBar',
    props: {
        collapsed: {
            type: Boolean,
            default: true
        },
        mode: {
            type: String,
            default: 'inline'
        }
    },
    components: { logo, subMenu, menuItem },
    data() {
        return {
            openKeys: [],
            keepOpenKeys: []
        };
    },
    computed: {
        ...mapGetters(['baseRoute', 'horizonSideRouters', 'layout']),
        sideMenus() {
            if (this.layout == 'horizontal') {
                return this.horizonSideRouters
            }else if(this.layout == 'top'){
                return [];
            }
            return this.baseRoute
        }
    },
    mounted() {
        let matched = this.$route.matched.filter(item => item.meta && item.meta.title);
        let { breadcrumb } = matched[0].meta || { breadcrumb: [] };
        if (breadcrumb.length > 1) {
            if (this.collapsed) {
                this.openKeys = breadcrumb.map(item => item.path)
            } else {
                this.keepOpenKeys = breadcrumb.map(item => item.path);
                this.openKeys = [];
            }
        }
        // window.addEventListener('mousemove', this.getMousePostion, true);
    },
    methods: {
        hasChildren(item) {
            return item.children && !item.children.every(item => item.extendone == 'true')
        },
        toggleMenu() {
            if (this.collapsed) {
                this.keepOpenKeys = this.openKeys;
                this.openKeys = [];
            } else {
                this.openKeys = this.keepOpenKeys
            }
            this.$store.dispatch('setting/changeSetting', {
                key: 'open',
                value: !this.collapsed,
                cache: 'open'
            });
        },
        changeOpen(keys) {
            if (keys.length != 0) {
                this.openKeys = [keys[keys.length - 1]]
            } else {
                this.openKeys = ['']
            }
        },
        getMousePostion(event) {
            let e = event || window.event;
            console.log(e);
            // return { x: e.clientX, y: e.clientY };
        }
    }
};
</script>
<style lang="scss" scoped>
.side_menu_box {
    align-items: center;
}

.side-wrapper {
    position: relative;
    flex: 1;
    height: 100%;
    z-index: 2;

    .side_setting_box {
        width: 100%;
        height: 58px;
        align-items: center;

        .setting_item {
            flex: 1;
            text-align: center;
            font-size: 20px;
            color: #9DB9DA;
            &.router-link-active{
                .anticon{
                    color: #fff!important;
                }
            }
        }
    }
}

.aside_fold {
    position: absolute;
    right: -23px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    cursor: pointer;
    z-index: 2;

    &::before,
    &::after {
        content: '';
        position: absolute;
        left: 0;
        width: 0;
        height: 0;
        border-right: 24px solid transparent;
    }

    &::before {
        top: -24px;
    }

    &::after {
        bottom: -24px;
    }

    .fold {
        font-size: 14px;
        color: #fff;
    }
}
</style>
